import React, { ReactElement, useContext, useEffect, useState } from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

import styles from './style';
import { Store } from '../../reducer';
import { ClassRoomType, PPTType } from '../../constant';
import { STORAGE_KEY_IS_FIRST_SHOW_PROGRESS_GUIDE } from '../../../../constant';
import Title from './components/Title';
import Guide from './components/Guide';
import Progress from './components/Progress';
import { changeBarStatus } from '../../actions';

export default (): ReactElement => {
  const [show, setShow] = useState(false);

  const { state } = useContext(Store);
  const { type, currentPPT, showDownloadResource } = state;

  useEffect((): void => {
    if (type === ClassRoomType.Vod) {
      // 新用户首次提示
      AsyncStorage.getItem(STORAGE_KEY_IS_FIRST_SHOW_PROGRESS_GUIDE).then(
        (res): void => {
          if (!res) {
            setShow(true);
            AsyncStorage.setItem(
              STORAGE_KEY_IS_FIRST_SHOW_PROGRESS_GUIDE,
              JSON.stringify({ res: true })
            );
          }
        }
      );
    }
  }, [type]);

  useEffect((): void => {
    if (!showDownloadResource) {
      changeBarStatus(currentPPT.type === PPTType.Video);
    }
  }, [currentPPT.type, showDownloadResource]);

  return (
    <View style={styles.content} pointerEvents="box-none">
      <View style={styles.empty} />
      <Title />
      {type === ClassRoomType.Vod && <Progress />}
      {show && (
        <Guide
          knowAction={(): void => {
            setShow(false);
          }}
        />
      )}
    </View>
  );
};
